

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <title>layuiAdmin std - 通用后台管理模板系统（iframe标准版）</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="../layuiadmin/layui/css/layui.css" th:href="@{static/layuiadmin/layui/css/layui.css}" media="all">
  <link rel="stylesheet" href="../layuiadmin/style/admin.css" th:href="@{static/layuiadmin/style/admin.css}" media="all">
  <script type="text/javascript" src="../js/echarts.js" th:src="@{static/js/echarts.js}"></script>
  <script type="text/javascript" src="js/jquery-1.8.3.min.js" th:src="@{static/js/jquery-1.8.3.min.js}"></script>

  <script>
  ///^http(s*):\/\//.test(location.href) || alert('请先部署到 localhost 下再访问');
  function getPicView(){ 
  	var pos = 0, ctx = null, saveCB,w = 320,h= 240, image = []; 
  	var canvas = document.createElement("canvas");//创建画布指定宽度和高度
  	canvas.setAttribute('width', 320); 
  	canvas.setAttribute('height', 240); //如果画布成功创建
  	if (canvas.toDataURL) { ctx = canvas.getContext("2d");//设置画布为2d，未来可能支持3d 
  	image = ctx.getImageData(0, 0, 320, 240);//截图320*240，即整个画布作为有效区(cutx?) 
  	saveCB = function(data) { 
  		var col = data.split(";");//把data切割为数组
  		var img = image; //绘制图像(这里不是很理解算法) //参数data  只是每行的数据  ，例如320*240 大小的照片，一张完整的照片下来需要240个data，每个data有320个rgb 
  		for(var i = 0; i < w; i++) { //转换为十进制
  			var tmp = parseInt(col[i]); 
  			img.data[pos + 0] = (tmp >> 16) & 0xff; 
  			img.data[pos + 1] = (tmp >> 8) & 0xff;
  			img.data[pos + 2] = tmp & 0xff; 
  			img.data[pos + 3] = 0xff; 
  			pos+= 4; 
  		} //当绘制320*240像素的图片时发给后端php 
  		if (pos == 4 * w * h) { //把图像放到画布上,输出为png格式
  			ctx.putImageData(img, 0, 0); 
  			$.post("***.do?method=picView", 
  			{
  				val: "data",
  				w:w,
  				h:h,
  				image: canvas.toDataURL("image/png")},
  				function(){ 
  					var imgStr = "";
  					$("#picView").html(imgStr);//显示拍摄的照片
  					$("#getPic").off('click');//禁用拍照功能
  					$("#getPic").addClass('layui-btn-disabled'); 
  				}); 
  				pos = 0; 
  		} 
  	}; 
  	} 
  	else
  	{ 
  		saveCB = function(data) 
  		{ 
  			image.push(data);//把数据一点点的放入
  			image[] pos+= 4 * w; 
  			if (pos == 4 * w * h) { 
  				$.ajax({
  					type: 'POST',
  					url: "***.do?method=picView",
  					data: {
  						val: "pixel",
  						w:w,
  						h:h,
  						image:image.join('|')}, 
  						success:function(){ 
  							pos = 0, 
  							ctx = null, 
  							saveCB,
  							w = 320,
  							h= 240, 
  							image = []; 
  							var imgStr = ""; 
  							$("#picView").html(imgStr);//显示拍摄的照片
  							$("#getPic").off('click');//禁用拍照功能 
  							$("#getPic").addClass('layui-btn-disabled');
  						} 
  				}); 
  				pos = 0; 
  			} 
  		}; 
  	} //拍照
  	$("#webcam").webcam({ 
  		width: 280, 
  		height: 240,
  		mode: "callback", 
  		swffile: "***/webcam/jscam_canvas_only.swf",//自己的路径
  		onSave: saveCB, 
  		onCapture: function () 
  		{ 
  			$("#webcam").css("display", "block"); 
  			$("#webcam").fadeOut("fast", function () { 
  				$("#webcam").css("opacity", 1); 
  			});
  			webcam.save();
  		}, 
  		debug: function (type, string) {
  			console.log(type + ": " + string); 
  		} 
  	}); 
  }

  </script>
</head>

<body>
		
<video src="" id="video"></video>


		<button id="rec">开始录制</button>


		<button id="camera">拍照</button>
		<!--canvs绘制-->
		<canvas width="640" height="480" id="outrec"></canvas>
		<!--base64绘制-->
		<img id="imgvideo" style="display:none;" width="640" height="480" src="" />


		<script type="text/javascript">
			var video = document.getElementById("video"); //视频dom元素


			//001.开启摄像头
			$('#rec').click(function() {
				//视频获取
				var Devicestate = navigator.mediaDevices.getUserMedia({
					video: true
				})


				Devicestate.then(function(mediaStream) {


					video.src = window.URL.createObjectURL(mediaStream);
					console.log(mediaStream)
					video.onloadedmetadata = function(e) {
						video.play();
					};


				});


				//用户拒绝使用,或者没有摄像头
				Devicestate.catch(function(err) {
					console.log(err.name);
				});


			});


			//002.点击拍照按钮
			$('#camera').click(function() {
				//视频转换到canvs
				var outrec = document.getElementById("outrec");
				var outreccon = outrec.getContext("2d");
				outreccon.drawImage(video, 0, 0, 640, 480);


				var img = outrec.toDataURL("image/jpeg", 0.5)


				$('#imgvideo').attr('src', img);


				// 调用方式
				// 参数一： 选择器，代表canvas
				// 参数二： 图片名称，可选
				downloadCanvasIamge('#outrec', 'imgvideo');
				//关闭摄像窗口页面
				setTimeout(function(){
					custom_close();
				},1100);
				
			});
			// 下载Canvas元素的图片
			function downloadCanvasIamge(selector, name) {
			   // 通过选择器获取canvas元素
			   var canvas = document.querySelector(selector)
			   // 使用toDataURL方法将图像转换被base64编码的URL字符串
			   var url = canvas.toDataURL('image/jpeg')
			   // 生成一个a元素
			   var a = document.createElement('a')
			   // 创建一个单击事件
			   var event = new MouseEvent('click')
			   
			   // 将a的download属性设置为我们想要下载的图片名称，若name不存在则使用‘下载图片名称’作为默认名称
			   a.download = name || '下载图片名称'
			   // 将生成的URL设置为a.href属性
			   a.href = url
			   
			   // 触发a的单击事件
			   a.dispatchEvent(event)
			}
			//关闭摄像窗口页面
			function custom_close(){
				if(confirm("摄像拍照成功，确认是否关闭本窗口")){
					//delete_file();
					window.opener=null;
					window.open('','_self');
					window.close();
				}else{


				}
			}
			//关闭窗口之后删除下载的图片文件，ActiveXObject对象只能在IE浏览器创建
			/*function delete_file(){
				alert("删除文件");
				var fso = new ActiveXObject("Scripting.FileSystemObject");
				var imgHandle = fso.GetFile("C:\\Users\\yuzhangwei\\Downloads\\imgvideo.jpg"); 
				imgHandle.Delete();
			}*/


		</script>



















		<div class="layui-layout layui-layout-admin">
      <div class="layui-header">
      	<div class="admin-login-box">
						<a class="logo" style="left: 0;" href="#">
							<span style="width: 50px;height: 100px;">
								
								<img src="../static/layuiadmin/style/res/logo.png" style="width: 200px; height: 50px;">
							</span>
						</a>
						<div class="admin-side-toggle">
							<i class="fa fa-bars" aria-hidden="true"></i>
						</div>
					</div>

      	
        <!-- 头部区域 -->
        <ul class="layui-nav layui-layout-left">
        	
          
          <li class="layui-nav-item layui-hide-xs" lay-unselect>
            <input style="background-color: #f2f2f2; width: 250px;" type="text" placeholder="搜索..." autocomplete="off" class="layui-input layui-input-search" layadmin-event="serach" lay-action="template/search.html?keywords="> 
          </li>
        </ul>
        <ul class="layui-nav layui-layout-right" lay-filter="layadmin-layout-right">
          
          <li class="layui-nav-item" lay-unselect>
            <a style="color: #75dd6e;" lay-href="tohomePage" layadmin-event="message" lay-text="首页">
              
              <!--
              	作者：1173073908@qq.com
              	时间：2019-06-13
              	描述：<i class="layui-icon layui-icon-notice"></i>  
              	<span class="layui-badge-dot"></span>
              -->
              	首页
              <!-- 如果有新消息，则显示小圆点 -->
              
              
            </a>
          </li>
          <li class="layui-nav-item layui-hide-xs" lay-unselect>
            <a  href="goodslist.html" layadmin-event="theme">
            	<!--
                	作者：1173073908@qq.com
                	时间：2019-06-13
                	描述：<i class="layui-icon layui-icon-theme"></i>
                -->
            	  商城
            </a>
          </li>
          <li class="layui-nav-item layui-hide-xs" lay-unselect>
            <a href="javascript:;" layadmin-event="note">
              <!--
              	作者：1173073908@qq.com
              	时间：2019-06-13
              	描述：<i class="layui-icon layui-icon-note"></i>
              -->
            	个人中心
            </a>
          </li>
          <li class="layui-nav-item layui-hide-xs" lay-unselect>
            <a href="javascript:;" layadmin-event="fullscreen">
              <i class="layui-icon layui-icon-screen-full"></i>
            </a>
          </li>
          <li class="layui-nav-item" lay-unselect>
            <a href="javascript:;">
              <cite>hiki</cite>
            </a>
            <dl class="layui-nav-child">
              <dd><a lay-href="set/user/info.html">基本资料</a></dd>
              <dd><a lay-href="set/user/password.html">修改密码</a></dd>
              <hr>
              <dd layadmin-event="logout" style="text-align: center;"><a>退出</a></dd>
            </dl>
          </li>
          
          <li class="layui-nav-item layui-hide-xs" lay-unselect>
            <a href="javascript:;" layadmin-event="about"><i class="layui-icon layui-icon-more-vertical"></i></a>
          </li>
          <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-unselect>
            <a href="javascript:;" layadmin-event="more"><i class="layui-icon layui-icon-more-vertical"></i></a>
          </li>
        </ul>
      </div>
 	
		</div>
	
  <div class="layui-fluid" style="margin-top: 40px;">
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md8">    
        <div class="layui-card">
          <div class="layui-card-header">
            最近更新
            <a lay-href="https://www.layui.com/doc/base/changelog.html" class="layui-a-tips">全部更新</a>
          </div>
          <div class="layui-card-body">
            <div class="layui-row layui-col-space10">
              <div class="layui-col-xs12 layui-col-sm4">
                <div class="layuiadmin-card-text">
                  <div class="layui-text-top"><i class="layui-icon layui-icon-water"></i><a lay-href="https://www.layui.com/doc/modules/flow.html">flow</a></div>
                  <p class="layui-text-center">修复开启 isLazyimg:true 后, 图片懒加载但是图片不存在的报错问题</p>
                  <p class="layui-text-bottom"><a lay-href="https://www.layui.com/doc/modules/flow.html">流加载</a><span>7 天前</span></p>
                </div>
              </div>
              <div class="layui-col-xs12 layui-col-sm4">
                <div class="layuiadmin-card-text">
                  <div class="layui-text-top"><i class="layui-icon layui-icon-upload-circle"></i><a lay-href="https://www.layui.com/doc/modules/upload.html">upload</a></div>
                  <p class="layui-text-center">修复开启 size 参数后，文件超出规定大小时，提示信息有误的问题</p>
                  <p class="layui-text-bottom"><a lay-href="https://www.layui.com/doc/modules/upload.html">文件上传</a><span>7 天前</span></p>
                </div>
              </div>
              <div class="layui-col-xs12 layui-col-sm4">
                <div class="layuiadmin-card-text">
                  <div class="layui-text-top"><i class="layui-icon layui-icon-form"></i><a lay-href="https://www.layui.com/doc/modules/form.html#val">form</a></div>
                  <p class="layui-text-center">增加 form.val(filter, fields)方法，用于给指定表单集合的元素初始赋值</p>
                  <p class="layui-text-bottom"><a lay-href="https://www.layui.com/doc/modules/form.html">表单</a><span>7 天前</span></p>
                </div>
              </div>
              <div class="layui-col-xs12 layui-col-sm4">
                <div class="layuiadmin-card-text">
                  <div class="layui-text-top"><i class="layui-icon layui-icon-form"></i><a lay-href="https://www.layui.com/doc/modules/form.html">form</a></div>
                  <p class="layui-text-center">对 select 组件新增上下键（↑ ↓）回车键（Enter）选择功能</p>
                  <p class="layui-text-bottom"><a lay-href="https://www.layui.com/doc/modules/form.html">表单</a><span>7 天前</span></p>
                </div>
              </div>
              <div class="layui-col-xs12 layui-col-sm4">
                <div class="layuiadmin-card-text">
                  <div class="layui-text-top"><i class="layui-icon layui-icon-form"></i><a lay-href="https://www.layui.com/doc/modules/form.html">form</a></div>
                  <p class="layui-text-center">优化 switch 开关组件，让其能根据文本自由伸缩宽</p>
                  <p class="layui-text-bottom"><a lay-href="https://www.layui.com/doc/modules/form.html">表单</a><span>7 天前</span></p>
                </div>
              </div>
              <div class="layui-col-xs12 layui-col-sm4">
                <div class="layuiadmin-card-text">
                  <div class="layui-text-top"><i class="layui-icon layui-icon-form"></i><a lay-href="https://www.layui.com/doc/modules/form.html">form</a></div>
                  <p class="layui-text-center">修复 checkbox 复选框组件在高分辨屏下出现的样式不雅问题</p>
                  <p class="layui-text-bottom"><a lay-href="https://www.layui.com/doc/modules/form.html">表单</a><span>7 天前</span></p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="layui-card">
          <div class="layui-card-header">动态</div>
          <div class="layui-card-body">
            <dl class="layuiadmin-card-status">
              <dd>
                <div class="layui-status-img"><a href="javascript:;"><img src="../layuiadmin/style/res/logo.png"></a></div>
                <div>
                  <p>胡歌 在 <a lay-href="http://fly.layui.com/vipclub/list/layuiadmin/">layuiadmin专区</a> 回答问题</p>
                  <span>几秒前</span>
                </div>
              </dd>
              <dd>
                <div class="layui-status-img"><a href="javascript:;"><img src="../layuiadmin/style/res/logo.png"></a></div>
                <div>
                  <p>彭于晏 在 <a lay-href="http://fly.layui.com/vipclub/list/layuiadmin/">layuiadmin专区</a> 进行了 <a lay-href="http://fly.layui.com/vipclub/list/layuiadmin/column/quiz/">提问</a></p>
                  <span>2天前</span>
                </div>
              </dd>
              <dd>
                <div class="layui-status-img"><a href="javascript:;"><img src="../layuiadmin/style/res/logo.png"></a></div>
                <div>
                  <p>贤心 将 <a lay-href="https://www.layui.com/">layui</a> 更新至 2.3.0 版本</p>
                  <span>7天前</span>
                </div>
              </dd>
               <dd>
                <div class="layui-status-img"><a href="javascript:;"><img src="../layuiadmin/style/res/logo.png"></a></div>
                <div>
                  <p>吴尊 在 <a lay-href="http://fly.layui.com/">Fly社区</a> 发布了 <a lay-href="http://fly.layui.com/column/suggest/">建议</a></p>
                  <span>7天前</span>
                </div>
              </dd>
              <dd>
                <div class="layui-status-img"><a href="javascript:;"><img src="../layuiadmin/style/res/logo.png"></a></div>
                <div>
                  <p>许上进 在 <a lay-href="http://fly.layui.com/">Fly社区</a> 发布了 <a lay-href="http://fly.layui.com/column/suggest/">建议</a></p>
                  <span>8天前</span>
                </div>
              </dd>
              <dd>
                <div class="layui-status-img"><a href="javascript:;"><img src="../layuiadmin/style/res/logo.png"></a></div>
                <div>
                  <p>小蚊子 在 <a lay-href="http://fly.layui.com/vipclub/list/layuiadmin/">layuiadmin专区</a> 进行了 <a lay-href="http://fly.layui.com/vipclub/list/layuiadmin/column/quiz/">提问</a></p>
                  <span>8天前</span>
                </div>
              </dd>
            </dl>  
          </div>
        </div>     
      </div>
      <div class="layui-col-md4">
        <div class="layui-card">
          <div class="layui-card-header">便捷导航</div>
          <div class="layui-card-body">
            <div class="layuiadmin-card-link">
              <a href="javascript:;">操作一</a>
              <a href="javascript:;">操作二</a> 
              <a href="javascript:;">操作三</a> 
              <a href="javascript:;">操作四</a> 
              <a href="javascript:;">操作五</a> 
              <a href="javascript:;">操作六</a>
              <button class="layui-btn layui-btn-primary layui-btn-xs">
                <i class="layui-icon layui-icon-add-1" style="position: relative; top: -1px;"></i>添加
              </button>
            </div>        
          </div>
        </div>
        <div class="layui-card">
          <div class="layui-card-header">八卦新闻</div>
          <div class="layui-card-body">

              <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-index-pageone">
                <div carousel-item id="LAY-index-pageone">
                  <div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
                </div>
              </div> 

          </div>
        </div>
        <div class="layui-card">
          <div class="layui-card-header">重点组件</div>
          <div class="layui-card-body">
            <ul class="layui-row layuiadmin-card-team">
              <li class="layui-col-xs6">
                <a lay-href="https://www.layui.com/doc/modules/table.html">
                  <span class="layui-team-img"><img src="../layuiadmin/style/res/logo.png"></span> 
                  <span>数据表格</span>
                </a>
              </li>
              <li class="layui-col-xs6">
                <a lay-href="https://www.layui.com/doc/modules/layim.html">
                  <span class="layui-team-img"><img src="../layuiadmin/style/res/logo.png"></span> 
                  <span>即时通讯</span>
                </a>
              </li>
              <li class="layui-col-xs6">
                <a lay-href="https://www.layui.com/doc/modules/form.html">
                  <span class="layui-team-img"><img src="../layuiadmin/style/res/logo.png"></span> 
                  <span>表单</span>
                </a>
              </li>
              <li class="layui-col-xs6">
                <a lay-href="https://www.layui.com/doc/modules/layer.html">
                  <span class="layui-team-img"><img src="../layuiadmin/style/res/logo.png"></span> 
                  <span>弹出层</span>
                </a>
              </li>
              <li class="layui-col-xs6">
                <a lay-href="https://www.layui.com/doc/modules/upload.html">
                  <span class="layui-team-img"><img src="../layuiadmin/style/res/logo.png"></span> 
                  <span>文件上传</span>
                </a>
              </li>
              <li class="layui-col-xs6">
                <a lay-href="https://www.layui.com/doc/modules/rate.html">
                  <span class="layui-team-img"><img src="../css/layuiadmin/style/res/logo.png"></span> 
                  <span>评分</span>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="main" style="width:600px; height:400px"></div>
<script>
	window.onload=function(){
	//1.定义画布
	var myCanvas = echarts.init(document.getElementById('main'));
	
	//2.定义数据
	var option={
		title:{text:'echarts图表'},//图表的标题
		tooltip:{trigger:'axis'},//鼠标滑动到图表上的效果 :axis轴级触发   :item 点级触发
		legend:{data:['销量']}, // 图形说明
		xAxis:{data:['衬衫','羊毛衫','夹克','裤子','运动鞋','袜子']},//横坐标
		yAxis:{},//纵坐标,通常根据数据量自动生成
		series:[{
			type:'line',// 图表类型 , 可以切换柱状图bar,折线图line,饼图pie ,点状图 scatter
			name:'销量',
			data:[5,10,25,15,3,0]
		}] // 图形类型,数据值
	};
	
	//3.将数据绑定在画布上
	myCanvas.setOption(option);
}
</script>
<script src="../layuiadmin/layui/layui.js"  th:src="@{static/layuiadmin/layui/layui.js}" ></script>
  <script>
  layui.config({
    base: '/static/layuiadmin/'  //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'sample']);
</script>
  <script>
  	$(function(){
	  		var mychars = echarts.init(document.getElementById('echarts_div'));
		
				mychars.showLoading();//数据加载完之前,显示一段简单的动画
				
				//定义2个数组
				var names=[];// 专门存放类型
				var shuliang=[];//专门存放数据
				
				$.ajax({
					type:'get',
					url:'/querydata',
					async : true, //强制将异步提交方法变为同步提交,(相当于用户要等待这个方法执行回调完毕后,才能操作其他功能)
					dataType:'json',
					success:function(result){
						if(result){
							for(var i=0;i<result.length;i++){
								names.push(result[i].name);
								shuliang.push(result[i].num);
							}
							mychars.hideLoading();//隐藏上面加载的动画
							// 图表插件动态转载数据的方法
							mychars.setOption({
								title:{text:'echarts图表'},
								tooltip:{trigger:'axis'},//鼠标滑动到图表上的效果
								legend:{data:['销量']}, // 图形说明
								xAxis:{data:names},//横坐标
								yAxis:{},
								series:[{
									name:'销量',
									type:'line',// 图表类型 , 可以切换柱状图bar,折线图line
									data:shuliang
								}] // 图形类型,数据值
							});
						}
						
					},
					error:function(){
						alert("图表数据请求失败");
						mychars.hideLoading();//隐藏上面加载的动画
					}
				});
				
				// 图表随着浏览器窗体变化而变化
				window.onresize = function(){
					mychars.resize();
				}
  	})
  </script>
</body>
</html>


